<template>
  <svg
    class="cursor-pointer"
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none">
    <path
      d="M5.1007 11.854C5.00697 11.9475 4.87998 12 4.74759 12H4C3.72386 12 3.5 11.7761 3.5 11.5V10.7524C3.5 10.62 3.55251 10.493 3.64601 10.3993L11.3472 2.67896C11.5424 2.48327 11.8594 2.48309 12.0548 2.67855L12.8216 3.44545C13.017 3.64089 13.0168 3.95779 12.8211 4.15297L5.1007 11.854Z"
      fill="currentColor" />
    <path
      d="M13.8412 3.12082C13.6469 3.32133 13.3261 3.32386 13.1286 3.12642L12.3737 2.37149C12.1762 2.174 12.1788 1.85304 12.3794 1.65875L12.8516 1.20149C12.9809 1.0714 13.1792 1 13.363 1C13.4534 0.999766 13.5431 1.01745 13.6267 1.05203C13.7103 1.08662 13.7862 1.13741 13.85 1.20149L14.2996 1.65101C14.3634 1.7148 14.4139 1.79058 14.4483 1.87399C14.4827 1.9574 14.5003 2.0468 14.5 2.13702C14.5 2.32212 14.4283 2.51911 14.2985 2.64894L13.8412 3.12082Z"
      fill="currentColor" />
    <path
      d="M5.5 3H3.5C2.39543 3 1.5 3.89543 1.5 5V12C1.5 13.1046 2.39543 14 3.5 14H12.5C13.6046 14 14.5 13.1046 14.5 12V8.5"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="round" />
  </svg>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  interface Props {
    size?: number | string;
    color?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #0a0a0a;
    }
  }
</style>
